<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
    </h:head>
    <h:body style="text-align:center">
        <p:dialog id="modalDialog" header="Bienvenido(a): #{loginBean.nombreusuario}"  modal="true" height="550" visible="true" width="1000" position="top" dynamic="false" >  
            <p:ajax event="close" update="modalDialog" listener="#{afiliacionBean.handleClose}"/>  
            <h:form id="form"> 

                <p:panel style="width: 100%">
                    <p:outputLabel value="Gestión de Afiliaciones" style="font-weight:bold"></p:outputLabel>
                </p:panel>
                <p:growl id="growl" sticky="true" showDetail="true"/>
                <p:growl id="msgs" showDetail="true"  />  

                <p:panel id="panel" style="width: 100%">     
                    <!--
                    <p:separator />  
                    -->

                    <h:panelGrid columns="4" columnClasses="label, value" styleClass="grid">

                        <h:outputText value="Búsqueda de Afiliados" />
                        <h:outputText value="" />
                        <h:outputText value="" />
                        <h:outputText value="" />

                        <h:outputText value="Nombre: " />
                        <p:inputText value="#{afiliacionBean.nombreAfi}" id="nomAfil"/>

                        <h:outputText value="Doc Identidad: " />
                        <p:inputText value="#{afiliacionBean.docIdenti}" id="docIden" />

                        <p:commandButton value="Buscar" update=":form:panel,:form:growl,:form:pnlAfiliaciones,:form:pnlAfiliado,:form:pnlPlanes,:form:pnlAfilis,:form:grdBtnNewAfils" id="buscarAfili"  
                                         action="#{afiliacionBean.buscarAfiliado}" />
                    </h:panelGrid> 

                    <h:panelGrid id="TblAfiliados" columns="1" columnClasses="label, value" styleClass="grid" rendered="#{afiliacionBean.verTblAfil}" >
                        <p:dataTable id="afiliados" var="afiliado" value="#{afiliacionBean.dataModel}"  selectionMode="single" 
                                     selection="#{afiliacionBean.selectedAfiliado}"  paginator="true" rows="5" 

                                     >  
                            <p:ajax event="rowSelect" listener="#{afiliacionBean.onRowSelect}"   
                                    update=":form:growl,:form:TblAfiliados,:form:pnlAfiliaciones,:form:grdAfiliaciones,:form:panel,:form:grdAfiliado,:form:pnlAfiliado,:form:pnlAfilis,:form:pnlPlanes,:form:grdBtnNewAfils" />  
                            <p:ajax event="rowUnselect" listener="#{afiliacionBean.onRowUnselect}" update=":form:growl,:form:pnlAfiliaciones,:form:afiliacionesafil,:form:grdAfiliaciones,:form:grdAfiliado,:form:pnlPlanes"  />

                            <f:facet name="header">  
                                Afiliados 
                            </f:facet>  

                            <p:column headerText="Id">  
                                #{afiliado.idAfiliado}  
                            </p:column>  

                            <p:column headerText="Nombre" sortBy=" #{afiliado.nombre}">  
                                #{afiliado.nombre}  
                            </p:column>  

                            <p:column headerText="Apellido"  sortBy="#{afiliado.apellido}" >  
                                #{afiliado.apellido}  
                            </p:column>  

                            <p:column headerText="Doc Identidad" >  
                                #{afiliado.docIdentidad}  
                            </p:column>                         

                            <p:column headerText="Telefono" >  
                                #{afiliado.telefono}  
                            </p:column>                           
                            <p:column headerText="Email" >  
                                #{afiliado.geteMail()}  
                            </p:column> 
                            <p:column headerText="Fec Nacimiento">  
                                <h:outputText value="#{afiliacionBean.utils.getMyFormattedDate(afiliado.fechaNacimiento)} ">
                                    <f:convertDateTime pattern="MM/dd/yyyy" />
                                </h:outputText>
                            </p:column>                           

                            <p:column headerText="Estado">  
                                #{afiliado.estado}  
                            </p:column>     

                        </p:dataTable>  

                    </h:panelGrid> 
                </p:panel>


                <p:panel id="pnlAfiliado" style="width: 100%" visible="#{afiliacionBean.verPnlAfil}">

                    <h:panelGrid id="grdAfiliado" columns="8"  styleClass="grid" rendered="true" >
                        <h:outputText value="Id Afiliado: "  />
                        <h:outputText value="#{afiliacionBean.selectedAfiliado.idAfiliado}" />
                        <h:outputText value="" />
                        <h:outputText value="" />
                        <h:outputText value="" />
                        <h:outputText value="" />
                        <h:outputText value="Afiliado:" />
                        <h:outputText value="#{afiliacionBean.selectedAfiliado.nombre} #{afiliacionBean.selectedAfiliado.apellido}"  />
                        <h:outputText value="Doc Identificación: " />
                        <h:outputText value="#{afiliacionBean.selectedAfiliado.docIdentidad}" />
                        <h:outputText value="" />
                        <h:outputText value="" />
                        <h:outputText value="" />
                        <h:outputText value="" />
                        <h:outputText value="Fecha Nacimiento: " />
                        <h:outputText value="#{afiliacionBean.utils.getMyFormattedDate(afiliacionBean.selectedAfiliado.fechaNacimiento)}" />


                        <h:outputText value="Estado: " />
                        <h:outputText value="#{afiliacionBean.selectedAfiliado.estado}" />

                    </h:panelGrid> 

                    <h:outputText value="" />
                    <h:outputText value="" />

                </p:panel>   

                <p:panel id="pnlAfiliaciones" style="width: 100%" visible="true">

                    <h:panelGrid id="grdAfiliaciones" columns="2" columnClasses="label, value" styleClass="grid" rendered="#{afiliacionBean.verTblAfils}" >

                        <p:dataTable id="tblAfiliaciones" var="afiliacion" value="#{afiliacionBean.dataModelAfils}"  selectionMode="single"
                                     selection="#{afiliacionBean.selectedAfiliacion}"  paginator="true" rows="5" 
                                     >  
                            <p:ajax event="rowSelect" listener="#{afiliacionBean.onRowSelectAfils}"   
                                    update=":form:growl,:form:pnlAfiliaciones,:form:grdAfiliaciones,:form:pnlPlanes,:form:pnlAfilis" />  

                            <p:ajax event="rowUnselect" listener="#{afiliacionBean.onRowUnselectAfils}" update=":form:growl,:form:pnlAfiliaciones,:form:afiliacionesafil"  />


                            <f:facet name="header">  
                                Afiliaciones 
                            </f:facet>  

                            <p:column headerText="Id">  
                                #{afiliacion.idAfiliacion}  
                            </p:column>  


                            <p:column headerText="Fec Inicial">  
                                <h:outputText value="#{afiliacionBean.utils.getMyFormattedDate(afiliacion.fechaIni)} ">
                                    <f:convertDateTime pattern="MM/dd/yyyy" />
                                </h:outputText>
                            </p:column>                           

                            <p:column headerText="Fec Final">  
                                <h:outputText value="#{afiliacionBean.utils.getMyFormattedDate(afiliacion.fechaFin)} ">
                                    <f:convertDateTime pattern="MM/dd/yyyy" />
                                </h:outputText>
                            </p:column> 

                            <p:column headerText="Plan">  
                                #{afiliacion.idPlan.nombre}  
                            </p:column>     

                            <p:column headerText="Categoria">  
                                #{afiliacion.idCategoria.nombre}  
                            </p:column>     

                            <p:column headerText="Nro Factura">  
                                #{afiliacion.nroFactura}  
                            </p:column> 

                            <p:column headerText="Estado">  
                                #{afiliacion.estado}  
                            </p:column>     



                        </p:dataTable>

                    </h:panelGrid> 

                    <h:panelGrid id="grdBtnNewAfils"  columns="1" columnClasses="label, value" styleClass="grid" rendered="#{afiliacionBean.verBtbNewAfils}">

                        <p:commandButton value="Nueva" update=":form:panel,:form:growl,:form:pnlAfiliaciones,:form:pnlAfiliado,:form:pnlPlanes,:form:pnlAfilis" id="nuevaAfils"  
                                         action="#{afiliacionBean.mostraNuevaAfils}" rendered="true"/>

                    </h:panelGrid> 

                </p:panel>   

                <p:panel id="pnlPlanes" style="width: 100%" visible="#{afiliacionBean.verPlanCatego}">
                    <h:panelGrid  columns="2" columnClasses="label, value" styleClass="grid">
                        <h:outputText value="Plan: *" />
                        <p:selectOneMenu id="idPlan" value="#{afiliacionBean.idPlan}" required="false">  
                            <f:selectItem itemLabel="Seleccione..." itemValue="" />  
                            <f:selectItems value="#{afiliacionBean.planes}" />  
                            <p:ajax listener="#{afiliacionBean.handlePlanChange}" update=":form:pnlPlanes"/>  
                        </p:selectOneMenu>   

                    </h:panelGrid>  

                    <h:panelGrid id="grdCuentas" columns="2" columnClasses="label, value" styleClass="grid" rendered="#{afiliacionBean.verTblCuen}" cellpadding="3" >
                        <p:dataTable id="tblCuentas" var="cuenta" value="#{afiliacionBean.dataModelCuenta}"  selectionMode="single"
                                     selection="#{afiliacionBean.selectedCuenta}"  paginator="true" rows="5" 
                                     >  
                            <p:ajax event="rowSelect" listener="#{afiliacionBean.onRowSelectCuenta}"   
                                    update=":form:growl,:form:pnlAfiliaciones,:form:grdCuentas" />  
                            <p:ajax event="rowUnselect" listener="#{afiliacionBean.onRowUnselectCuenta}" update=":form:growl,:form:pnlAfiliaciones,:form:afiliacionesafil"  />
                            <f:facet name="header">  
                                Cuentas 
                            </f:facet>  

                            <p:column headerText="Id">  
                                #{cuenta.idCuenta}  
                            </p:column>  

                            <p:column headerText="Nro Cuenta">  
                                #{cuenta.nroCuenta}  
                            </p:column> 

                            <p:column headerText="Banco">  
                                #{cuenta.idBanco.nombre}  
                            </p:column>     

                            <p:column headerText="Tipo Cuenta">  
                                #{cuenta.idTipoCuenta.nombre}  
                            </p:column>     

                            <p:column headerText="Ref Tarjeta">  
                                #{cuenta.idRefTarjeta.nombre}  
                            </p:column>     

                            <p:column headerText="Fecha">  
                                <h:outputText value="#{afiliacionBean.utils.getMyFormattedDate(cuenta.fechaCreate)} ">
                                    <f:convertDateTime pattern="MM/dd/yyyy" />
                                </h:outputText>
                            </p:column>                           

                            <p:column headerText="Estado">  
                                #{cuenta.estado}  
                            </p:column>     
                        </p:dataTable>  
                    </h:panelGrid> 


                </p:panel>   

                <p:panel id="pnlAfilis" style="width: 100%" visible="#{afiliacionBean.verPlanCatego}">

                    <h:panelGrid id="afiliacionesafil" columns="4" columnClasses="label, value" styleClass="grid">


                        <h:outputText value="Factura: " />
                        <p:inputText value="#{afiliacionBean.nroFactura}" />





                        <h:outputText value="Fecha Inicial: *" /> 
                        <h:panelGrid  columns="2" cellpadding="5">
                            <p:calendar value="#{afiliacionBean.fechaIni}" id="idCalFecIni" showOn="button" disabled="false" readonly="true" required="false" />  
                        </h:panelGrid>


                        <h:outputText value="Categoria: *" />
                        <p:selectOneMenu id="idCategoria" value="#{afiliacionBean.idCategoria}">  
                            <f:selectItem itemLabel="Seleccione..." itemValue="" />  
                            <f:selectItems value="#{afiliacionBean.categorias}" />  
                            <p:ajax update=":form:grdServici"  
                                    listener="#{afiliacionBean.handleCategoriaChange()}" />  
                        </p:selectOneMenu>  

                        <h:outputText value="Fecha Final: *"/> 
                        <h:panelGrid columns="3" cellpadding="5">
                            <p:calendar value="#{afiliacionBean.fechaFin}" id="idCalFecFin" showOn="button" disabled="true" readonly="true" required="false"/>   


                        </h:panelGrid>                        
                    </h:panelGrid>  

                    <h:panelGrid id="grdServici" columns="4" columnClasses="label, value" styleClass="grid">
                        <h:outputText value="Servicios: " />            
                        <p:selectOneListbox id="categoServis" value="#{afiliacionBean.idServicio}" >  
                            <f:selectItems value="#{afiliacionBean.servicios}" />  
                        </p:selectOneListbox>  



                    </h:panelGrid>  

                    <h:panelGrid columns="2" columnClasses="label, value" styleClass="grid">
                        <p:commandButton value="Guardar" update=":form:panel,:form:growl,:form:pnlAfiliaciones,:form:pnlAfilis,:form:pnlPlanes" id="GuardarAfilis"  
                                         action="#{afiliacionBean.guardarAfiliacion}"/>
                    </h:panelGrid>

                </p:panel>
            </h:form>
        </p:dialog>

    </h:body>



</html>